<template>
  <div class="user-center">
    <div class="user-box">
      <div class="user-title">个人中心</div>
      <div class="user-content">
        <div class="user-msg-card">
          <div class="msg-card">
            <div class="msg-item">
              <div class="item-icon">
                <img
                  src="../../assets/imgs/user-center-icon/kzczje.svg"
                  alt=""
                />
              </div>
              <div class="item-msg">
                <div class="item-msg-num">73.00</div>
                <div class="item-msg-txt">卡总充值金额</div>
              </div>
            </div>
            <div class="msg-item">
              <div class="item-icon">
                <img
                  src="../../assets/imgs/user-center-icon/jrczje.svg"
                  alt=""
                />
              </div>
              <div class="item-msg">
                <div class="item-msg-num">0</div>
                <div class="item-msg-txt">今日充值金额</div>
              </div>
            </div>
            <div class="msg-item">
              <div class="item-icon">
                <img src="../../assets/imgs/user-center-icon/zhye.svg" alt="" />
              </div>
              <div class="item-msg">
                <div class="item-msg-num">135.00</div>
                <div class="item-msg-txt">账户余额</div>
              </div>
            </div>
          </div>
          <div class="msg-card">
            <div class="msg-item">
              <div class="item-icon">
                <img
                  src="../../assets/imgs/user-center-icon/chikashu.svg"
                  alt=""
                />
              </div>
              <div class="item-msg">
                <div class="item-msg-num">4</div>
                <div class="item-msg-txt">持卡数</div>
              </div>
            </div>
            <div class="msg-item">
              <div class="item-icon">
                <img
                  src="../../assets/imgs/user-center-icon/trade3.svg"
                  alt=""
                />
              </div>
              <div class="item-msg">
                <div class="item-msg-num">12</div>
                <div class="item-msg-txt">交易笔数</div>
              </div>
            </div>
            <div class="msg-item">
              <div class="item-icon">
                <img
                  src="../../assets/imgs/user-center-icon/knzye.svg"
                  alt=""
                />
              </div>
              <div class="item-msg">
                <div class="item-msg-num">180.00</div>
                <div class="item-msg-txt">卡内总余额</div>
              </div>
            </div>
          </div>
        </div>
        <div class="user-money-card">
          <div class="money-card">
            <div class="icon-big">
              <img src="../../assets/imgs/user-center-icon/wycz.svg" alt="" />
            </div>
            <div class="money-txt">我要充值</div>
            <div class="money-small">
              <img src="../../assets/imgs/user-center-icon/czj.svg" alt="" />
            </div>
          </div>
          <div class="money-card">
            <div class="icon-big">
              <img src="../../assets/imgs/user-center-icon/sqkk.svg" alt="" />
            </div>
            <div class="money-txt">申请开卡</div>
            <div class="money-small">
              <img src="../../assets/imgs/user-center-icon/sqx.svg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="user-content">
        <div class="user-charts">
          <div class="user-bg">
            <img src="../../assets/imgs/user-center-img/ggw.png" alt="" />
          </div>
          <div class="user-chart-box">
            <div ref="chartRef" style="width: 100%; height: 400px"></div>
          </div>
        </div>
        <div class="user-msg-box">
          <div class="title-line">
            <div class="line-txt">最新公告</div>
          </div>
          <div class="gg">
            <div class="gg-item" v-for="item in 8" :key="item">
              <div class="gg-title">
                9月14日-17日中国大陆/香港假期，入账延迟，请提前通知！
              </div>
              <div class="gg-bottom">
                <div class="gg-time">2024-09-12 17:09:01</div>
                <div class="gg-detail-btn">详情</div>
              </div>
            </div>
          </div>
          <div class="see-more">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const chartRef = ref(null); // 引用 DOM 容器
// 初始化 ECharts 图表
const initChart = () => {
  const chart = echarts.init(chartRef.value);

  const option = {
    title: {
      text: "7日开卡量",
    },
    tooltip: {},
    xAxis: {
      data: [
        "2024-12-01",
        "2024-12-02",
        "2024-12-03",
        "2024-12-04",
        "2024-12-05",
        "2024-12-06",
        "2024-12-07",
      ],
    },
    yAxis: {},
    series: [
      {
        type: "bar",
        data: [5, 20, 36, 10, 10, 12, 11],
        color:"#CCA46B",
        barWidth:10,
      },
    ],
  };

  chart.setOption(option);

  // 响应式调整大小
  window.addEventListener("resize", () => chart.resize());
};

onMounted(() => {
  initChart();
});
</script>
<style lang="less" scoped>
.user-center {
  padding: 1.5rem;
  box-sizing: border-box;
  .user-box {
    width: 80rem;
    margin: auto;
    .user-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 1.125rem;
      color: #000000;
      line-height: 1.125rem;
      text-align: left;
      font-style: normal;
    }
    .user-content {
      margin-top: 1.5rem;
      border-radius: 1rem;
      display: flex;
      justify-content: space-between;
      .user-msg-card {
        background: #fff;
        flex-shrink: 0;
        width: 55.375rem;
        height: 20rem;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        .msg-card {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .msg-item {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 2px dashed rgba(0, 0, 0, 0.1);
            .item-icon {
              margin-right: 1rem;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .item-msg {
              .item-msg-num {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 1.375rem;
                color: #26353f;
                line-height: 1.875rem;
                text-align: left;
                font-style: normal;
              }
              .item-msg-txt {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 0.875rem;
                color: #595959;
                line-height: 1.8rem;
                text-align: left;
                font-style: normal;
              }
            }
          }
          .msg-item:last-child {
            border: none;
          }
        }
        .msg-card:first-child {
          border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
        }
      }
      .user-money-card {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 22.75rem;
        .money-card {
          width: 100%;
          height: 9rem;
          border-radius: 1rem;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          .money-txt {
            margin: 0 2rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 1.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #cea975;
            line-height: 1.75rem;
            font-style: normal;
          }
        }
      }
      .user-charts {
        width: 55.375rem;
        .user-bg {
          width: 100%;
          height: 9.75rem;
          border-radius: 1rem;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .user-chart-box {
          padding: 1rem;
          box-sizing: border-box;
          margin-top: 1.5rem;
          background: #fff;
          height: 24.4rem;
          width: 100%;
          border-radius: 1rem;
        }
      }
      .user-msg-box {
        width: 22.75rem;
        height: 35.65rem;
        padding: 1rem;
        box-sizing: border-box;
        background: #fff;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        .title-line {
          flex-shrink: 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.85);
          .line-txt {
            width: 86px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background: rgba(0, 0, 0, 0.85);
            border-radius: 8px 8px 0px 0px;
          }
        }
        .gg {
          flex: 1;
          overflow: auto;
          .gg-item {
            padding: 1rem 0;
            box-sizing: border-box;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
            .gg-title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 0.875rem;
              color: rgba(0, 0, 0, 0.85);
              text-align: left;
              font-style: normal;
            }
            .gg-bottom {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .gg-time {
                width: 144px;
                height: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 0.875rem;
                color: #6d7278;
                line-height: 0.875rem;
                text-align: left;
                font-style: normal;
              }
              .gg-detail-btn {
                padding: 0.3rem 1rem;
                border-radius: 2rem;
                border: 1px solid rgba(0, 0, 0, 0.25);
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 0.75rem;
                color: #a6a6a6;
                font-style: normal;
              }
            }
          }
        }
        .see-more {
          flex-shrink: 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 1rem;
          color: #6d7278;
          display: flex;
          justify-content: center;
          align-items: center;
          font-style: normal;
          padding: 2rem;
          padding-bottom: 1rem;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>